<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
        .flow-default {
            height: 100px;
            overflow: auto;
            font-size: 0;
        }
    </style>
</head>
<body>
<div class="layuimini-container" >
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                                <div style="text-align: center;background-color:#ffffff;min-height:127px;padding: 10px">
                                    欢迎使用文件收集平台
                                    <br>
                                    制作人:Xhy
                                    <br>
                                    联系我:1416318023@qq.com
                                </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4" id="vue">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip">

                    </i>系统公告

                    </div>
                    <div class="layui-card-body layui-text flow-default" style="height: 85px;">
                        <div class="layuimini-notice" v-for="(noticeItem,noticeIndex) in notices" :key="'notice-'+noticeIndex">
                            <div class="layuimini-notice-title" v-text="noticeItem.title"></div>
                            <div class="layuimini-notice-extra" v-text="noticeItem.gmtCreated">2019-07-11 12:57</div>
                            <div class="layuimini-notice-content layui-hide" v-html="noticeItem.content">
                                界面足够简洁清爽。<br>
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/html" id="toolbarDemo">
        <p>快捷提交</p>
        <div class="layui-btn-container">
        </div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    <script type="text/html" id="currentTableBar">
                    </script>
</div>
<script type="text/html" id="status">
    {{#  if(d.isSubmit === false ){ }}
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">未提交</button>
    {{#  } }}
    {{#  if(d.isSubmit === true ){ }}
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">已提交</button>
    {{#  } }}
</script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="../api/urlConfig.js"></script>
<script src="../js/base64.min.js"></script>

<script>
    var maxSingleFileSize;
    var vm = new Vue({
        el: "#vue",
        data:{
            notices: [
                {

                }
            ],

        },
        created(){
            this.listNotices()
        },
        methods:{
            listNotices(){
                axios({
                    url: ipURL + '/common/notice/list/0',
                    method: 'get',
                    headers: {token: localStorage.token},
                }).then((result) => {
                    this.notices = result.data.data.data
                }).catch(function (error) {
                });
            }

        }
    });


    // 推送最新公告
    $(function () {
        $.ajax({
            url: ipURL + '/common/notice/newest',
            method: 'get',
            beforeSend: function (request) {
                request.setRequestHeader("token", localStorage.token);
            },
            success: function (res) {
                var d = res.data.data
                if(d != null){
                    showNotice(d.gmtCreated,toDiyHtml(d.title,d.content))
                }
            },
            error: function (data) {
                layer.msg(res.message);
            }
        });
    })


    function showNotice(noticeTime,html){
        parent.layer.open({
            type: 1,
            title: '系统公告'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">'+noticeTime+'</span>',
            area: '300px;',
            shade: 0.8,
            id: 'layuimini-notice',
            btn: ['确认'],
            btnAlign: 'c',
            moveType: 1,
            content:html,
            success: function (layero) {
                $.ajax({
                    url: ipURL + '/common/notice/receive',
                    type: 'POST',
                    beforeSend: function (request) {
                        request.setRequestHeader("token", localStorage.token);
                    },
                });
            }
        });
    }

    function toDiyHtml(title,content){
        var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
            '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
            '<div style="font-size: 12px">' + content + '</div>\n' +
            '</div>\n';
        return html
    }

    layui.use(['form', 'table','upload','dropdown'], function () {
        var upload = layui.upload;
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            dropdown = layui.dropdown

        ;

        /**
         * 查看公告信息
         **/
        $('body').on('click', '.layuimini-notice', function () {
            var title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();
            var html = toDiyHtml(title,content)

            showNotice(noticeTime,html)

        });
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {

            var userName = $('input[name="userName"]').val()
            var email = $('input[name="studentNumber"]').val()
            //执行搜索重载
            table.reload('currentTableId', {

                page: {
                    curr: 1
                },
                where: {
                    userName: userName,
                    email:email
                }
            });

            return false;
        });


        table.render({
            elem: '#currentTableId',
            // url: '../api/table.json',
            url: ipURL + "/user/task/index",
            headers: {token: localStorage.token},
            parseData: function (res) { //res 即为原始返回的数据

                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data.data, //解析数据列表

                };

            },

            response: {
                statusCode: 0 //规定成功的状态码，默认：0
            },
            text: {
                none: '作业都完成啦~'
            },
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {
                        field: 'name',
                        title: '作业名',
                        width:100,
                    },
                    {
                        field: 'isSubmit',
                        title: '状态',
                        templet: '#status',
                        width:80,
                    },
                    {
                        field: 'fileName',
                        title: '文件名',

                    },
                    {
                        field: 'fileSizeString',
                        title: '文件大小',
                    },
                    {
                        field: 'praFileName',
                        title: '最终文件名',
                        width:200,
                    },
                    {
                        field: 'submitTime',
                        title: '提交时间',
                    },
                    {
                        title: '操作',
                        minWidth: 150,
                        align: "center",
                        templet: function(d){
                            var operation = '';
                            if(d.url !=''){
                                operation += `<a class='layui-btn layui-btn-warm layui-btn-xs ' lay-event="showDescription" >查看作业</a>`;
                                operation += '';
                            }
                            operation+= `<a class='layui-btn layui-btn-normal layui-btn-xs data-count-edit upload_btn' value="${d.id}" lay-event='scbb'>上传文件</a>`;
                            if (d.isSubmit === true){
                                operation+=" "
                                operation +=   `<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">撤回</a>`;
                            }
                            return operation
                        }
                    }
                ]
            ],
            done:function(res, curr, count){
                var tableId = this.id;
                var tableElem = this.elem;
                //table render出来实际显示的table组件
                var tableViewElem = tableElem.next();
                //渲染当前页面的所有upload组件
                var taskId
                upload.render({
                    elem: tableViewElem.find('.upload_btn')
                    ,url: ipURL+"/user/task/upload"
                    ,accept: 'file'
                    ,size: maxSingleFileSize
                    ,headers: {token: localStorage.token}
                    ,before: function(obj){ //obj包含信息，跟choose回调完全一致。在传值之前先获取id
                        var tableElem = this.item;
                        taskId = tableElem.attr('value');
                        layer.load(); //上传loading
                    }
                    ,data: {
                        taskRecordId:function(){
                            return taskId
                        },
                    }
                    ,done: function (res) {
                        if (res.state){
                            layer.closeAll('loading'); //关闭loading
                            layui.table.reload('currentTableId'); //重载父页表格，参数为表格ID
                        }else{
                            layer.closeAll('loading'); //关闭loading
                        }
                        layer.msg(res.message)
                    }
                    ,error: function(index, upload){
                        layer.closeAll('loading'); //关闭loading
                        layer.msg('上传失败，请联系管理员');
                    }
                });
            },
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;

            if(obj.event === 'showDescription'){

                // 查看文件
                var url =  data.url; //要预览文件的访问地址
                if(url == ''){
                    layer.msg("文件路径为空")
                    return;
                }
                window.open('http://your remote IP:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));

            }
        });
    });
</script>
</body>
</html>
